<template>
    <div class="screen-operate-bar" ref="screenOperate">
        <div class="screen-operate-bar-switch" @click="toggle">
            <i class="el-icon-arrow-left" v-if="isClose"/>
            <i class="el-icon-arrow-right" v-else />
        </div>
        <el-tabs tab-position="top" stretch v-show="!isClose">
            <el-tab-pane label="图层">
                <Draggable v-model="list" :force-fallback="true" animation="300" @end="onDragend">
                    <transition-group>
                        <div v-for="(item,index) in list"
                             :class="{'object-item':true,active:activeIndex === index}"
                             @click.stop.prevent="() =>{}"
                             @contextmenu.prevent="e => handleRightKey(e,index)"
                             :key="item.key" @click="onActivated(item,index)">
                            {{item.name}}
                        </div>
                    </transition-group>
                </Draggable>
            </el-tab-pane>
            <el-tab-pane label="操作">
                <div>{{activeIndex === -1?'背景':list[activeIndex].name}}</div>
                <el-form class="form" ref="form" :model="form" label-width="80px" size="mini">
                    <el-form-item v-for="(item,index) in formKeys" :key="index+'-'" :label="item.name" v-show="item.type !== 'Hidden'">
                        <el-input v-if="item.type === 'Hidden'" :value="form[item.propName]" type="text"></el-input>
                        <el-input v-if="item.type === 'String'" v-model="form[item.propName]" @change="onFormChange"></el-input>
                        <el-input type="textarea" style="height: 300px"  v-if="item.type === 'Object'" v-model="form[item.propName]"  @change="onFormChange"></el-input>
                        <el-color-picker v-if="item.type === 'Color'" v-model="form[item.propName]" @change="onFormChange" @active-change="onFormChange"></el-color-picker>
                        <el-button v-if="item.type === 'Button'" @click="onSure">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Draggable from 'vuedraggable'
    export default {
        name: "OperateBar",
        components:{Draggable},
        props:{
            list:{
                default:[],
                type:Array
            },
        },
        data(){
            return {
                activeIndex:-1,
                form:{},
                formKeys:[],
                isClose:false,
            }
        },
        methods:{
            onActivated(data,index){
                this.activeIndex = index
                this.$emit('onActivated',index)
            },
            setActive(index){
                this.activeIndex = index
            },
            onDragend(){
                const keys = this.list.map(item => item.key)
                this.$emit('onSort',keys)
            },
            setForm(props = {}){
                this.form = {}
                this.formKeys = [];
                // 将对象参数转化为数组格式，方便循环创建表单
               this.formKeys = Object.keys(props).map(item => {
                   if(props[item].type=='Object' && typeof props[item].default!='string'){
                       props[item].default=JSON.stringify(props[item].default);
                   }
                   this.$set(this.form,item,props[item].default)
                   return {
                       ...props[item],
                       propName:item
                   }
               })
                this.$forceUpdate()
            },
            onFormChange(){
                let form = {...this.form};
                const map = {};
                this.formKeys.forEach(item => {
                    map[item.propName] = item.type;
                });
                for (let key in form){
                    if(map[key]=='Object'){
                        form[key]=JSON.parse( form[key]);
                    }
                }
                this.$emit('onFormChange',form)
            },
            onSure(){
                this.$emit('onFormChange',this.form)
            },
            handleRightKey(e,index){
                this.$emit('onRightKeyClick',e,index)
            },
            toggle(){
                this.isClose = !this.isClose
                setTimeout(() => {
                    this.$emit('onOperateViewChange')
                })
            },
            getBoundingClientRect(){
                return this.$refs.screenOperate.getBoundingClientRect()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .screen-operate-bar {
        background-color rgba(0, 0, 0, 0.8)
        color #ffffff
        display flex
        justify-content space-between
        &-switch{
            flex-grow 0
            flex-shrink 0
            width 20px
            display flex
            align-items center
            background-color #333333
        }
        >>> .el-tabs{
            flex 1
            width 320px
        }
        .object-item {
            cursor pointer
            user-select none
            text-align center
            line-height 30px
            height 30px
            transition all 0.3s

            &:hover, &.active {
                background-color rgba(255, 255, 255, 0.5)
            }
        }
        >>> .el-tabs__item{
            color white
        }
        .form{
            color white
            padding 0 10px
            >>> .el-form-item__label{
                color white
            }
        }
    }
</style>
